<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">银行卡管理</x-header>
    <div class="main-header">
      <div class="weui-cells_form">
        <group gutter="0">
          <x-input placeholder="请卡主姓名" class="input" is-type="china-name" v-model="name">
            <div class="input-label" slot="label">卡主姓名</div>
          </x-input>
          <x-input placeholder="请输银行卡号" class="input" type="number" v-model="number">
            <div class="input-label" slot="label">银行卡号</div>
          </x-input>
          <x-input placeholder="请输入开户行" class="input" v-model="bank">
            <div class="input-label" slot="label">开户行</div>
          </x-input>
        </group>
      </div>
      <div class="save">
        <x-button class="save-button" @click.native="editBankHandle">确认</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { editBankCardInformation } from '@/api/user'
export default {
  name: 'bank',
  data () {
    return {
      name: '',
      number: '',
      bank: ''
    }
  },
  methods: {
    editBankHandle () {
      if (!this.name) {
        this.$vux.toast.show({
          text: '请输入卡主姓名',
          type: 'cancel'
        })
        return
      } else if (!this.number) {
        this.$vux.toast.show({
          text: '请输入银行卡号',
          type: 'cancel'
        })
        return
      } else if (!this.bank) {
        this.$vux.toast.show({
          text: '请输入开户行',
          type: 'cancel'
        })
        return
      } else {
        editBankCardInformation({cid: this.globalData.cid, bankCardUserName: this.name, bankCardNumber: this.number, bank: this.bank}).then(() => {
          this.$vux.toast.show({
            text: '修改成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.back(-1)
          },1500)
        })
      }
    }
  }

}
</script>

<style scoped>

</style>
